<template>
  <div>
    <div class="left-box">
      <div class="left-top box-main">
        <div class="title">实时统计</div>
        <div class="left-content-top">
          <div class="renkou-num">
            <span>1</span>
            <span>4</span>
            <span>8</span>
            <span>8</span>
            户
            <span>5</span>
            <span>0</span>
            <span>7</span>
            <span>7</span>
            人
          </div>
          <div class="renkou-text">总人口数</div>
        </div>
        <div class="left-content-bottom">
          <echart :options="option1" />
        </div>
      </div>
      <!-- 左侧下 -->
      <div class="left-bottom box-main">
        <div class="title">特殊人群</div>
        <div class="left-content">
          <echart :options="option2" />
        </div>
      </div>
    </div>
    <div class="right-box">
      <div class="box-main">
        <div class="nyXq">
          <div class="nyXqLi" v-for="item in chooseLi">
            <div class="nyxqIco">
              <img :src="item.ico" alt="" />
            </div>
            <div class="nyxqTxt">
              <p>{{ item.name }}</p>
              <p>
                <span :class="item.value.color">{{ item.value.val }}</span
                >{{ item.value.unit }}
              </p>
            </div>
          </div>
        </div>
      </div>
      <div class="box-main">
        <div class="title">职业统计</div>
        <div class="echart">
          <echart :options="option3" />
        </div>
      </div>
      <div class="box-main">
        <div class="title">民族成分统计</div>
        <div class="echart">
          <echart :options="option4" />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Echart from "components/common/echart/Echart.vue";

import { echart1, echart2, echart3, echart4 } from "./option";
import { districtPeopleDta } from "network/VRqj";

export default {
  components: { Echart },
  data() {
    return {
      chooseLi: [],
      option1: null,
      option2: null,
      option3: null,
      option4: null,
    };
  },

  mounted() {
    
  },
  created() {
    this.districtPeopleDta(sessionStorage.getItem("cunId"));
  },
  methods: {
    async districtPeopleDta(id) {
      let result = await districtPeopleDta(id);
      this.chooseLi = [
        {
          field: "zongren",
          ico: require("assets/img/sy/gmIco5.png"),
          name: "农民总人数",
          value: {
            val: result.result.peopleNum,
            unit: "人",
            color: "color1",
          },
        },
        {
          field: "zongren",
          ico: require("assets/img/sy/gmIco6.png"),
          name: "农民总户数",
          value: {
            val: result.result.registerNum,
            unit: "户",
            color: "color2",
          },
        },
        {
          field: "zongren",
          ico: require("assets/img/sy/gmIco8.png"),
          name: "低保户",
          value: {
            val: result.result.lowGuardNum,
            unit: "户",
            color: "color3",
          },
        },
        {
          field: "zongren",
          ico: require("assets/img/sy/gmIco9.png"),
          name: "五保户",
          value: {
            val: result.result.fiveGuardNum,
            unit: "户",
            color: "color4",
          },
        },
      ];
      this.option2 = echart2(result.result.special);
      this.option4 = echart4(result.result.nation);
      let ageX = [],
        ageMan = [],
        ageWuman = [];
      result.result.age.forEach((element) => {
        ageX.push(element.name);
        ageMan.push(element.oneNum);
        ageWuman.push(element.towNum);
      });
      this.option1 = echart3(ageX, ageMan, ageWuman);
      let incomeX = [],
        incomeMan = [],
        incomeWuman = [];
      result.result.income.forEach((element) => {
        incomeX.push(element.name);
        incomeMan.push(element.oneNum);
        incomeWuman.push(element.towNum);
      });
      this.option3 = echart3(incomeX, incomeMan, incomeWuman);
    },
    refurbish(id) {
      this.districtPeopleDta(id)
    }
  },
};
</script>

<style lang="scss" scoped>
.left-box {
  .left-top {
    width: 100%;
    padding-bottom: 1.25rem;
    .left-content-top {
      width: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      .renkou-num {
        width: 100%;
        margin: 1.25rem 0;
        text-align: center;
        color: #fff;
        font-size: 1.125rem;
        font-family: shuzi;
        span {
          display: inline-block;
          width: 1.875rem;
          line-height: 2.5rem;
          font-size: 1.875rem;
          border: 0.0625rem solid #0174d4;
        }
      }
      .renkou-text {
        width: 80%;
        line-height: 1.875rem;
        background: #077ada;
        color: #fff;
        font-size: 1.125rem;
        margin: 0 auto;
        text-align: center;
      }
    }
    .left-content-bottom {
      width: 100%;
      height: 15.625rem;
    }
  }
  .left-bottom {
    width: 100%;
    .left-content {
      width: 100%;
      height: 12.5rem;
    }
  }
}
.right-box {
  .nyXq {
    width: 100%;
    height: 13.4375rem;
    display: flex;
    flex-wrap: wrap;
    color: #fff;
    justify-content: center;
    padding: 1.25rem;
    .nyXqLi {
      display: flex;
      align-items: center;
      justify-content: center;
      font-family: shuzi;
      width: 50%;
      .nyxqIco {
        width: 2.8125rem;
        img {
          width: 100%;
        }
      }
      .nyxqTxt {
        p {
          white-space: nowrap;
          margin: 0 0.3125rem;
          font-size: 0.875rem;
          span {
            font-size: 1.625rem;
            margin-right: 0.3125rem;
          }
        }
      }
      .color1 {
        color: #48ece7;
      }
      .color2 {
        color: #ffd452;
      }
      .color3 {
        color: #47a2ff;
      }
      .color4 {
        color: #47ff88;
      }
      .color5 {
        color: #ff7b47;
      }
    }
  }
  .echart {
    height: 13.4375rem;
  }
}
</style>